<template>
  <view class="whe_maxv" style="background-color: #f8faf7">
    <view class="sy_bg xd" style="height: 350px">
      <view class="pad_t_20">
        <view class="pad_20">
          <view class="fz_16">
            账户余额
          </view>
          <view class="wh_f pad_t-10">
            <view class="flex_1" style="color:#3a9e5f">
              ¥
              <text class="em fz_24">{{ userInfo.cash_balance }}</text>
            </view>
            <view class="wz_white fz_12">
              <view @click="goWall" style="background-color: #3a9e5f;padding: 7px 20px;border-radius: 25px">
                <image class="centerdq" src="../../static/img/qb.png" style="width: 14px;height: 14px" />
                <text class="centerdq">
                  去充值
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="jd pad_10 boxs"
            style="height: calc(100vh - 120px);top: 120px;left: 0;
            width: 100%">
        <view class="he_f ba_white bor_10 xyy pad_10 boxs he_max ccgl-y">
          <view class="mag_b_10">
            <up-tabs lineColor="#3a9e5f" :list="tabList" @click="addTab"></up-tabs>
          </view>
          <view class="flex_1">
            <scroll-view :scroll-y="true" @scrolltolower="scrolltolower()"
                         style="height: 100%"
                         class="scrollView">
              <view v-for="(item,index) in list" :key="index" class="bor_b_hui pad_10 boxs">
                <view class="wh_f_l">
                  <view v-if="tabIndex===1">{{ item.remark }}</view>
                  <view v-if="tabIndex===2">{{ item.type_str }}</view>
                  <view class="wz_lv">{{item.price}}</view>
                </view>
                <view class="pad_t-5 fz_10 wz_hui">
                  <text>{{ item.updated_at }}</text>
                </view>
              </view>
            </scroll-view>
          </view>

        </view>
      </view>
    </view>
  </view>
</template>
<script>
import {consumerList, rechargeList} from "../../Api/shop";
import {userCenter} from "../../Api/user";

export default {
  name: "index",
  data(){
    return{
      tabList:[
        {id:1,name: '充值明细'},
        {id:2,name: '消费明细'},
      ],
      page:1,
      tabIndex:1,
      list:[],
      userInfo:{}
    }
  },
  methods:{
    //分页查询
    scrolltolower(){
      this.page += 1
      switch (this.tabIndex){
        case 1:
          this.getRechargeList()
          break;
        case 2:
          this.getConsumerList()
          break;
      }
    },
    //获取充值明细
    getRechargeList(){
      rechargeList({
        page:this.page
      }).then(res => {
        this.list = res.data.data
      })
    },
    //获取消费明细
    getConsumerList(){
      consumerList({
        page:this.page
      }).then(res => {
        this.list = res.data.data
      })
    },
    //去充值
    goWall(){
      uni.navigateTo({
        url: '/pagesList/userWallet/index'
      });
    },
    //切换tabs
    addTab(e){
      this.page = 1
      switch (e.id){
        case 1:
          this.getRechargeList()
          break;
        case 2:
          this.getConsumerList()
          break;
      }
      this.tabIndex = e.id
    }
  },
  onShow(){
    //获取充值明细
    rechargeList().then(res => {
      this.list = res.data.data
    })
    //获取账户余额
    userCenter().then(res=>{
      this.userInfo = res.data
      console.log('用户信息',res)
    })
  }
}
</script>
<style scoped lang="scss">

</style>
